<template>
  <contextmenu v-model:open="LocalContextmenu.visible">
    <div class="context-menu-item" v-for="item in LocalContextmenu.items" @click="item.click">{{ item.title }}</div>
  </contextmenu>
</template>
<script setup lang="ts">
import { cloneDeep } from "lodash-unified";
import Contextmenu from "@/components/windows/components/contextmenu/Contextmenu.vue";

const props = defineProps<{
  tableModule: Record<string, any>;
}>();

const emit = defineEmits<{
  (e: "menuclick", item: { type: MenuClickType; data: any }): void;
}>();

const Table = props.tableModule;

const LocalContextmenu = (() => {
  const emitMenu = (type: MenuClickType, data: any) => {
    emit("menuclick", { type, data });
  };
  const registerListener = () => {
    const clickListener = (e) => {
      const dom = e.target as HTMLElement;
      if (!dom) return;
      if (dom.id.includes("contextmenu")) return;
      else {
        s.visible = false;
      }
    };
    addEventListener("click", clickListener);
    onUnmounted(() => {
      removeEventListener("click", clickListener);
    });
  };
  //右键单击事件
  const openContextMenu = (e, item: any = null, index: number, isChild: boolean, parent?: any) => {
    e.preventDefault();
    e.stopPropagation();
    s.currentIndex = index;
    s.currentItem = item;
    s.parent = parent;
    s.visible = true;
    if (!item) return;
    //如果是多选的 则不会选中右键的那行
    if (Table.activatedIds.length > 1) return;
    Table.rowClick(item, index, isChild, { dataKey: "" }, parent ?? Table);
  };
  const s = reactive({
    x: 0,
    y: 0,
    items: [
      {
        title: "上传文件",
        value: "add",
        click: () => {
          emitMenu("add", s.currentItem);
        },
      },
      {
        title: "新建文件夹",
        value: "newFolder",
        click: () => {
          emitMenu("newFolder", s.currentItem);
        },
      },
      {
        title: "预览",
        value: "view",
        if: computed(() => s.currentItem?.lx !== 0),
        click: () => {
          emitMenu("view", s.currentItem);
        },
      },
      {
        title: "标签管理",
        value: "TagMana",
        click: () => {
          emitMenu("TagMana", s.currentItem);
        },
      },
      {
        title: "下载",
        value: "download",
        if: computed(() => s.currentItem?.lx !== 0),
        click: () => {
          emitMenu("download", s.currentItem);
        },
      },
      {
        title: "重命名",
        value: "rename",
        if: computed(() => s.currentItem !== null),
        click: () => {
          if (!s.currentItem) return;
          emitMenu("rename", s.currentItem);
          // Rename.id = s.currentItem.id;
          // Rename.editable = true;
        },
      },
      {
        title: "粘贴",
        value: "paste",
        if: computed(() => Table.cutList.length !== 0),
        click: () => {
          emitMenu("paste", cloneDeep(Table.cutList));
          Table.cutList = [];
        },
      },
      {
        title: "剪切",
        value: "cut",
        if: computed(() => s.currentItem !== null),
        click: () => {
          let list: any[];
          if (s.parent) {
            list = s.parent.activatedIds.map((item) => s.parent.children[item].id);
          } else {
            list = Table.activatedIds.map((item) => item);
          }
          Table.cutList = list;
          emitMenu("cut", list);
        },
      },
      {
        title: "删除",
        value: "delete",
        if: computed(() => s.currentItem !== null),
        click: () => {
          /*          Modal.confirm({
                      maskClosable: true,
                      content: `是否删除${s.currentItem.mc}?`,
                      onOk: () => {
                        if (s.parent) {
                          s.parent.children = s.parent?.children?.filter((item) => item.id !== s.currentItem.id);
                        }
                        emit("delete", s.currentItem, s.parent);
                      },
                    });*/
        },
      },
      {
        title: "刷新",
        value: "refresh",
        click: () => {
          location.reload();
        },
      },
    ],
    visible: false,
    currentItem: null as null | any,
    parent: null as any,
    currentIndex: -1,
    newFolderName: "",
    openContextMenu,
  });
  registerListener();
  return s;
})();
defineExpose({
  //111
  open: LocalContextmenu.openContextMenu,
});

type MenuClickType = "add" | "newFolder" | "view" | "TagMana" | "download" | "rename" | "paste" | "cut" | "delete" | "refresh";
</script>
<style scoped lang="scss">
.context-menu-item {
  padding: 8px;
  cursor: default;
  user-select: none;
  transition: 0.1s;

  &:hover {
    background: #0001;
  }
}
</style>
